<template>
  <div class="add-node-btn-big-box">
    <div
      class="add-node-btn-box-mask"
      v-show="visible"
      @click="visible = false"
    ></div>
    <div class="add-node-btn-box">
      <div class="add-node-btn">
        <el-popover
          placement="right-start"
          popper-class="add-node-popover"
          trigger="manual"
          v-model="visible"
        >
          <div class="add-node-popover-body">
            <div
              v-for="item in addIconList"
              :key="item.type"
              class="add-node-popover-item"
              :class="item.class"
              @click="addType(item.type)"
            >
              <div class="item-wrapper">
                <img :src="item.icon" alt="" class="img-style" />
              </div>
              <p>{{ item.label }}</p>
            </div>
          </div>
          <button
            class="btn"
            type="button"
            slot="reference"
            @click="clickAddBtn"
            v-show="!ifNoShowBtn"
          >
            <i style="color: #fff" class="el-icon-plus"></i>
          </button>
          <!-- <button
          class="btn"
          type="button"
          slot="reference"
        >
          <i
            style="color:#fff"
            class="el-icon-plus"
          ></i>
        </button> -->
        </el-popover>
      </div>
    </div>
  </div>
</template>
<script>
// import mixin from "./node/mixin";
export default {
  props: ["value", "tip", "ifNoShowBtn"],
  // mixins: [mixin],
  inject: ["openDrawer", "getFlatRoot"],
  data() {
    return {
      visible: false,
      nodes: [],
      addIconList: [],
    };
  },
  model: {
    prop: "value",
    event: "input",
  },
  computed: {
    nodeConfig: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
  mounted() {},
  methods: {
    clickAddBtn() {
      this.addIconList = this.$flowConfig.addNodesOptions;
      const baseDetailData = JSON.parse(localStorage.getItem("baseDetailData"));
      if (!baseDetailData) {
        this.$message({
          message: "请先填写策略基础信息",
          type: "warning",
        });
        this.visible = false;
        return;
      }

      if (this.value && this.value.type === 1) {
        this.$message({
          message: "目标策略节点下不可增加其他节点",
          type: "warning",
        });
        this.visible = false;
        return;
      }
      if (
        this.value.type === 2 &&
        this.value.childNode &&
        this.value.childNode.type === 1
      ) {
        this.$message({
          message: "已存在目标节点，请删除目标节点后新增",
          type: "warning",
        });
        this.visible = false;
        return;
      }
      if (this.value.type === 0) {
        let typeList = [4, 2];
        let showTypeList = [];
        if (this.value.childNode && this.value.childNode.type) {
          if (typeList.includes(this.value.childNode.type)) {
            showTypeList = typeList.filter((item) => {
              return item != this.value.childNode.type;
            });
          } else {
            showTypeList = typeList;
          }
        } else {
          showTypeList = typeList;
        }
        //开始节点
        this.addIconList = this.$flowConfig.addNodesOptions.filter((item) => {
          if (showTypeList.includes(item.type)) {
            return item;
          }
        });
      } else if (this.value.type === 2) {
        //内容节点
        let typeList = [1, 5];
        let showTypeList = [];

        if (this.value.childNode && this.value.childNode.type) {
          if (typeList.includes(this.value.childNode.type)) {
            if (
              this.value.childNode.type === 5 &&
              this.value.childNode.conditionNodes.length == 0
            ) {
              showTypeList = typeList;
            } else {
              showTypeList = typeList.filter((item) => {
                return item != this.value.childNode.type;
              });
            }
          } else {
            showTypeList = typeList;
          }
        } else {
          showTypeList = typeList;
        }
        this.addIconList = this.$flowConfig.addNodesOptions.filter((item) => {
          if (showTypeList.includes(item.type)) {
            return item;
          }
        });
      } else if (this.value.type === 3 || this.value.type === 6) {
        //分流节点
        let typeList = [2];
        let showTypeList = [];
        if (this.value.childNode && this.value.childNode.type == 2) {
          showTypeList = [];
        } else {
          showTypeList = typeList;
        }
        this.addIconList = this.$flowConfig.addNodesOptions.filter((item) => {
          if (showTypeList.includes(item.type)) {
            return item;
          }
        });
      }
      if (this.addIconList.length == 0) {
        this.$message({
          message: "无可新增节点类型",
          type: "info",
        });
        this.visible = false;
        return;
      }
      this.addIconList = this.addIconList;
      this.visible = !this.visible;

      // console.log(this.nodeConfig);
      // console.log("childNodeP", this.childNodeP);
    },
    // 新增类型
    addType(type) {
      this.visible = false;
      // 判断这个节点是不是判断节点 不能嵌套太多层条件 否则会出问题
      // console.log(this.nodeConfig);
      let level = this.nodeConfig.level;
      let branch = this.$nodeType.客户分流;
      let branch1 = this.$nodeType.经营控制;
      let target = this.$nodeType.目标;

      let flatDic = this.getFlatRoot();
      if (type == branch1 || type == target) {
        //判断内容节点是否选择活动类型
        if (
          this.nodeConfig.type === 2 &&
          this.nodeConfig.nodeDetail &&
          !this.nodeConfig.nodeDetail.contentType
        ) {
          this.$message.error("请先设置内容节点活动内容");
          return;
        }
      }
      // 解决条件嵌套导向的问题
      if (type == branch) {
        let lastCondition = 0;
        let currentNode = this.nodeConfig;
        while (currentNode) {
          if (currentNode.type == this.$nodeType.客户分流) {
            lastCondition = currentNode.level;
            break;
          }
          currentNode = flatDic[currentNode.fatherID];
        }
        level = lastCondition + 1;
        if (level >= this.$flowConfig.conditionNestCount + 1) {
          return this.$message.error("已超过最大嵌套限制数量");
        }
      }
      if (type == branch1) {
        let lastCondition = 0;
        let currentNode = this.nodeConfig;
        while (currentNode) {
          if (currentNode.type == this.$nodeType.经营控制) {
            lastCondition = currentNode.level;
            break;
          }
          currentNode = flatDic[currentNode.fatherID];
        }
        level = lastCondition + 1;
        if (level >= this.$flowConfig.conditionNestCount + 1) {
          return this.$message.error("已超过最大嵌套限制数量");
        }
      }

      //  分支跳出检测的问题 如果childNode存在 而且下面没有分支跳出 要补充上 后续要计算分支跳出连接的点 方便后续后端操作
      if (level > 1 && type == branch && !this.nodeConfig.childNode) {
        this.nodeConfig.childNode = this.$factory.getStruct(
          this.nodeConfig && this.nodeConfig.nodeId,
          this.$nodeType.分支跳出,
          null,
          level
        );
      }

      let data = this.$factory.getStruct(
        this.nodeConfig && this.nodeConfig.nodeId,
        type,
        null,
        level
      );

      // 修改原来添加的逻辑 他是直接覆盖下一节点 而不是链表链接
      if (this.nodeConfig.childNode) {
        let temp = this.nodeConfig.childNode;
        this.nodeConfig.childNode = data;
        temp.fatherID = data.nodeId;
        data.childNode = temp;
      } else {
        this.nodeConfig.childNode = data;
      }

      //添加节点自动弹出弹框
      // 默认条件
      if (data.type === 4 || data.type === 5) {
        this.$flowConfig.createPopupImmediately &&
          this.openDrawer(data.conditionNodes[0]);
      } else {
        this.$flowConfig.createPopupImmediately && this.openDrawer(data);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.add-node-btn-box {
  width: 240px;
  display: inline-flex;
  flex-shrink: 0;
  position: relative;
  &:first-child {
    margin-left: 16px;
  }
  &:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0px;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: auto;
    width: 2px;
    // height: 100%;
    background-color: #c7c7c7;
  }
}
.img-style {
  width: 36px;
}
.btn {
  outline: none;
  cursor: pointer;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  width: 30px;
  height: 30px;
  background: #4880ff;
  border-radius: 50%;
  position: relative;
  border: none;
  line-height: 30px;
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  // margin-left: 36px;
}
.add-node-popover {
  padding: 14px 26px;
  .add-node-popover-body {
    display: flex;
    .add-node-popover-item {
      margin-right: 20px;
      text-align: center;
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
      i {
        font-size: 36px;
      }
      p {
        color: #333;
        margin-top: 4px;
        margin-bottom: 0;
      }
    }
    .approver {
      i {
        color: #e6a23c;
      }
    }
    .condition {
      i {
        color: #67c23a;
      }
    }
    .notifier {
      i {
        color: #4880ff;
      }
    }
  }
}
</style>
